import React from 'react';
import styles from './style';
import { View, SafeAreaView, Image, TextInput, Text, TouchableOpacity } from 'react-native';
import * as Animatable from 'react-native-animatable';
import ListImg from '../../../../common/component/listImg';
import { getPhotosList } from '../../../../common/api/photos';
import AsyncStorage from '@react-native-async-storage/async-storage';
const searchImg = require('../../img/search.png');
export default class Search extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            cancleText: '取消',
            tabArr: [],
            clearStatus: true,
            list: [],
        };
    }
    componentDidMount() {
        this.getKeyword();
    }
    getKeyword = async () => {
        const seachKeyword = await AsyncStorage.getItem('seachKeyword');
        if (seachKeyword) {
            this.setState({
                tabArr: JSON.parse(seachKeyword),
            });
        }
    };
    submit = async ({ nativeEvent: { text, eventCount, target } }) => {
        const res = await getPhotosList({ keyword: text });
        // this.setState({ clearStatus: false, cancleText: '清空' });
        this.setState({
            list: res,
            clearStatus: false,
            cancleText: '清空',
        });
        const arr = JSON.parse(JSON.stringify(this.state.tabArr));
        arr.unshift(text);
        await AsyncStorage.setItem('seachKeyword', JSON.stringify([...new Set(arr)]));
    };
    render() {
        let { navigation } = this.props;
        let { value, cancleText, tabArr, clearStatus, list } = this.state;
        const searchText = value => {
            this.setState({ value: value });
        };
        return (
            <SafeAreaView style={styles.content}>
                {/* <Back navigation={navigation}></Back> */}
                <View style={styles.searchBorder}>
                    <View style={styles.searchImg}>
                        <Image source={searchImg} style={styles.imgStyle} />
                    </View>
                    <View style={styles.searchInput}>
                        <TextInput
                            placeholder="搜索热门壁纸"
                            onChangeText={value => searchText(value)}
                            value={value}
                            onFocus={() => {
                                this.setState({ clearStatus: false, cancleText: '清空' });
                            }}
                            onSubmitEditing={this.submit}
                        />
                    </View>
                    {!clearStatus ? null : (
                        <TouchableOpacity onPress={() => navigation.pop()}>
                            <View style={styles.cancleText}>
                                <Text>{cancleText}</Text>
                            </View>
                        </TouchableOpacity>
                    )}

                    {clearStatus ? null : (
                        <TouchableOpacity
                            onPress={() => {
                                this.setState({ clearStatus: true, cancleText: '取消', value: '', list: [] });
                                this.getKeyword();
                            }}
                        >
                            <View style={styles.cancleText}>
                                <Text>{cancleText}</Text>
                            </View>
                        </TouchableOpacity>
                    )}

                    <View></View>
                </View>
                <View style={styles.bottomContent}>
                    {!clearStatus ? null : (
                        <Animatable.View animation="slideInUp">
                            <Text style={[{ color: '#C8C8C8', fontSize: 14, margin: 20 }]}>最近搜索</Text>
                            <View
                                style={[
                                    {
                                        flexDirection: 'row',
                                        flexWrap: 'wrap',
                                        margin: 20,
                                        marginTop: 0,
                                    },
                                ]}
                            >
                                {tabArr.map(item => {
                                    return (
                                        <TouchableOpacity
                                            key={item}
                                            onPress={() => {
                                                this.submit({ nativeEvent: { text: item } });
                                                this.setState({ value: item });
                                            }}
                                        >
                                            <View style={styles.borderStyle}>
                                                <Text>{item}</Text>
                                            </View>
                                        </TouchableOpacity>
                                    );
                                })}
                            </View>
                        </Animatable.View>
                    )}
                    {clearStatus ? null : (
                        <Animatable.View style={{ marginTop: 20 }} animation="slideInUp">
                            <ListImg list={list} navigation={navigation} />
                        </Animatable.View>
                    )}
                </View>
            </SafeAreaView>
        );
    }
}
